<template>
	<view class="header">
		<view class="header-item" v-for="(item,index) in headerTab" :key="item.id" @click="handleHeader(index)">
			<text :class="{active:headerActive==index}">{{item.title}}</text>
		</view>

	</view>
	<scroll-view scroll-y class="scroll" scroll-with-animation :scroll-into-view="scrollId" @scroll="handleScroll">
		<view class="" id="header-1">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				indicator-color="rgba(255, 255, 255, .62)" indicator-active-color="#fff">
				<swiper-item v-for="(item,index) in picurl" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="package">
				<view class="price">
					<text class="amount">¥{{service.salePrice/100 * popupData.num}}</text>
					<text class="amount-after">起 市场价¥{{service.initPrice/100* popupData.num}}</text>
				</view>
				<view class="content">
					<text class="title">{{service.name}}</text>
					<!-- <text class="tag">壳牌蓝标（4L）+更换机滤+工时费</text> -->
					<view class="footer">
						<image src="/static/anxin.png" mode=""></image>
						<text>安心购 | 正品保障·万家门店·专业服务</text>
					</view>
				</view>
			</view>
			<view class="service">
				<view class="item" @click="handleCheckCar">
					<text class="label">车型</text>
					<text class="value" v-if="carList.length">{{carList[carIndex].carBrand}} {{carList[carIndex].carSeries}} {{carList[carIndex].carType}}</text>
					<text class="value" v-else @click.stop="onAddCar">请添加车辆</text>
					<image src="../../static/right.png" mode=""></image>
				</view>
				<view class="item" @click="submit">
					<text class="label">服务</text>
					<text class="value">{{data.productList[popupData.typeIndex].secondProductName}} {{service.name}}</text>
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="shop" id="header-2">
			<view class="top">
				<text class="title">适用门店</text>
				<text class="tag">距离最近</text>
			</view>
			<view class="content" @click="onStoreInfo">
				<image :src="store.outPic" mode=""></image>
				<view class="">
					<text class="slh shop-title ">{{store.storeName}}</text>
					<view class="">
						<text style="width: 300rpx;" class="slh">{{store.address}}</text>
						<text>{{store.distance}}KM</text>
					</view>
				</view>
			</view>
		</view>
		<view class="shop">
			<view class="top">
				<text class="title">服务流程</text>

			</view>
			<view class="process">
				<view class="">
					<image src="../../static/s1.png" mode=""></image>
					<text>选择套餐</text>
				</view>
				<image src="../../static/right.png" mode=""></image>
				<view class="">
					<image src="../../static/s2.png" mode=""></image>
					<text>下单支付</text>
				</view>
				<image src="../../static/right.png" mode=""></image>
				<view class="">
					<image src="../../static/s3.png" mode=""></image>
					<text>获取券码</text>
				</view>
				<image src="../../static/right.png" mode=""></image>
				<view class="">
					<image src="../../static/s4.png" mode=""></image>
					<text>在线预约</text>
				</view>
				<image src="../../static/right.png" mode=""></image>
				<view class="">
					<image src="../../static/s5.png" mode=""></image>
					<text>到店服务</text>
				</view>

			</view>
		</view>
		<view class="commit" id="header-3" v-if="comment">
			<view class="top">
				<text class="title">用户评价</text>
				<view class="" @click="onAllComment">
					<text>全部评价</text>
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="commit-list">
				<view class="commit-item">
					<view class="user">
						<image src="/static/logo.png" mode=""></image>
						<view class="">
							<text class="nickName">{{comment.createdBy}}</text>
							<text class="time">{{comment.createdTime}}</text>
						</view>
					</view>
					<view class="content">
						<image src="../../static/s6.png" mode=""></image>
						<text class="shop-name">车搭档({{comment.storeName}}) </text>
						<text class="commit-content">{{comment.content}}</text>
					</view>
					<view class="pics" v-if="comment.picUrl">
						<image src="" v-for="(item,index) in 3" :key="index" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	<!-- 	<view class="detail" id="header-4">
			<text class="title">套餐详情</text>
			<image :src="service.imgUrl" mode="widthFix"></image>
		</view> -->
	</scroll-view>
	<view class="footer-fix">
		<view class="content">
			<view class="price">
				<text class="amount">{{service.salePrice/100* popupData.num}}元</text>
				<text class="unamount">原价({{service.initPrice/100* popupData.num}}元)</text>
			</view>
			<button class="btn" @click="submit">立即购买</button>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
		
		<view class="popup-content">
			<view class="shop-product">
				<image :src="data.productList[popupData.typeIndex].picStr" mode=""></image>
				<view class="right">
					<text class="title">{{ data.productList[popupData.typeIndex].secondProductName}}</text>
					<text class="amount">￥{{detail[popupData.oilIndex].salePrice * popupData.num / 100}}</text>
				</view>
			</view>
			<text class="title">套餐类型</text>
			<view class="list">
				<text :class="{active:popupData.typeIndex==index}" @click="handleType(index)" v-for="(item,index) in data.productList" :key="index">{{item.secondProductName}}</text>
			
			</view>
			<text class="title">机油规格</text>
			<view class="list">
				<text :class="{active:popupData.oilIndex==index}" @click="handleOil(index)" v-for="(item,index) in detail" :key="index">{{item.name}}</text>
				
			</view>
			<view class="liters-box">
				<view class="liters">
					<text class="title">机油升数</text>
					<text class="unit">单位(L)</text>
					<text class="ts">*当前选择车型适用 4L 机油</text>
				</view>
				<uni-number-box :min="4"  v-model="popupData.num" />

			</view>
			<button class="btn" @click="onsubmit">提交</button>
		</view>
	</uni-popup>
	<uni-popup ref="popupCar" type="bottom" border-radius="10px 10px 0 0">
		<view class="popup-select">
			<text class="title">选择车辆</text>
			<view class="select-list">
				<view class="select-item" :class="{'select-item-active':selectCarIndex==index}" @click="handleCarActive(index)" v-for="(item,index) in carList" :key="index">
					<view class="left">
						<image :src="item.carLogoPic" class="icon" mode=""></image>
						<text>{{item.carNumber}}</text>
					
					</view>
					<image src="../../static/select.png" class="right" mode=""></image>
				</view>
			</view>
			<button class="btn" @click="onConfirmCar">确定</button>
		</view>
	</uni-popup>
	
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getProductView,
		carInfoList,
		storeInfo,
		evaluate,
		getChildProduct
	}from '@/api'
	import {
		wxOpenid
	} from '@/utils/login-sdk.js'
	import {
		onLoad,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app'
	
	onLoad(()=>{
		getData()
		
		getStoreDistance()
		
	})
	onShow(()=>{
		getCarList()
	})
	const service = ref()
	const comment = ref()
	const detail = ref([])
	const data = ref()
	const carList = ref()
	const carIndex= ref(0)
	const selectCarIndex = ref(0)
	const headerTab = ref([{
			title: "商品",
			id: "header-1"
		},
		{
			title: "门店",
			id: "header-2"
		},
		{
			title: "评价",
			id: "header-3"
		},
		{
			title: "详情",
			id: "header-4"
		},
	])
	const scrollId = ref('')
	const headerActive = ref(0)
	const popup = ref()
	const popupCar = ref()
	const store = ref()
	const picurl = ref([])
	const popupData = ref({
		typeIndex: 0,
		oilIndex: 0,
		num: 4
	})
	const getData = async()=>{
		const res = await getProductView({businessType:3})
		data.value = res.result
		data.value.productList.map((item,index)=>{
			if(item.secondProductId == data.value.secondProductId){
				popupData.value.typeIndex = index
			}
		})
		getProductDetail(data.value.secondProductId)
		if(data.value.picStr){
			picurl.value = data.value.picStr.split(',')
		}
	}
	/** 点击header*/
	const handleHeader = (index) => {
		headerActive.value = index
		scrollId.value = headerTab.value[index].id
	}
	/** 添加车辆*/
	const onAddCar = ()=>{
		uni.navigateTo({
			url:'/pages/addCar/addCar'
		})
	}
	/** 页面滚动*/
	const handleScroll = (e) => {

		const scrollTop = Math.floor(e.detail.scrollTop)

		if (scrollTop < 493) {
			headerActive.value = 0
		}
		if (scrollTop > 493 && scrollTop <= 785) {
			headerActive.value = 1
		}
		if (scrollTop > 785 && scrollTop <= 1137) {
			headerActive.value = 2
		}
		if (scrollTop > 1137) {
			headerActive.value = 3
		}
	}
	/** 显示购买明细详情*/
	const submit = () => {
	
		popup.value.open()
	}
	/** 选择套餐类型*/
	const handleType = (index) => {
		popupData.value.typeIndex = index
		if(index!=popupData.value.typeIndex){
			popupData.value.num = 4
		}
		console.log('click...')
		getProductDetail(data.value.productList[popupData.value.typeIndex].secondProductId)
		
	}
	/** 选择机油类型*/
	const handleOil = (index) => {
		if(index!=popupData.value.oilIndex){
			popupData.value.num = 4
		}
		popupData.value.oilIndex = index
		service.value = detail.value[index]
	}
	/** 选择车辆弹窗显示*/
	const handleCheckCar = ()=>{
		popupCar.value.open()
	}
	/** 全部评价 */
	const onAllComment = ()=>{
		uni.navigateTo({
			url:'/pages/allComment/allComment?storeId='+store.value.id
		})
	}
	/** 门店详情 */
	const onStoreInfo = ()=>{
		uni.navigateTo({
			url:"/pages/storeInfo/storeInfo?id="+store.value.id
		})
	}
	/** 选择车辆*/
	const handleCarActive = (index)=>{
		selectCarIndex.value = index
	}
	/** 确定选择车辆*/
	const onConfirmCar = ()=>{
		carIndex.value = selectCarIndex.value
		popupCar.value.close()
	}
	/** 选择我的车辆列表 */
	const getCarList = async()=>{
		const {
			memberId
		} = await wxOpenid()
		const res = await carInfoList({
			memberId
		})
		carList.value = res.result
	}
	/** 获取最近的门店*/
	const getStoreDistance = ()=>{
		uni.getLocation({
			type: 'wgs84',
			success: async (res)=> {
				const city = await storeInfo({lot:res.longitude,lat:res.latitude,businessType:'3'})
				store.value = city.result
				const commentResult = await evaluate({storeId:store.value.id})
				comment.value = commentResult.result
			},
			fail: (err) => {
				uni.showModal({
					title:'位置授权提示',
					content:'打开定位失败，您可以检查手机定位是否开启后手动进行位置授权'
				})
			}
		});
	}
	
	/** 获取项目明细 */
	const getProductDetail = async(secondProductId)=>{
		const res = await getChildProduct({secondProductId})
		detail.value = res.result
		popupData.value.oilIndex = 0
		service.value = res.result[0]
		// detail.value.map(item=>{
		// 	if(data.value.productInfoId == item.id){
		// 		service.value = item
		// 		console.log(service.value)
		// 	}
		// })
		
	}
	/** 提交*/
	const onsubmit = () => {
		if(carList.value.length==0){
			uni.showToast({
				title:'请添加车辆',
				icon:'none'
			})
			return false
		}
		const obj = {
			carInfo:carList.value[carIndex.value],
			service:data.value.productList[popupData.value.typeIndex].secondProductName +' '+service.value.name,
			serviceData:service.value,
			num:popupData.value.num,
			carInfoId:carList.value[carIndex.value].carInfoId,
			productInfoId:service.value.id
		}
		console.log(service.value)
		uni.setStorageSync('maintainConfirm',JSON.stringify(obj))
		uni.navigateTo({
			url:"/pages/maintainConfirm/maintainConfirm"
		})
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}
	.shop-product{
		display: flex;
		margin-bottom: 30rpx;
		image{
			display: block;
			width: 200rpx;
			height: 200rpx;
			border-radius: 26rpx;
			margin-right: 20rpx;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 30rpx 0;
			.title{
				display: block;
			}
			.amount{
				display: block;
				color: #F00;
			}
		}
	}
	.header {
		height: 100rpx;
		background: #FE9B23;
		padding: 0 82rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.header-item {
			height: 100rpx;

			text {
				color: #fff;
				font-size: 32rpx;
				display: block;
				margin-top: 20rpx;
			}

			.active::after {
				content: "";
				display: block;
				width: 54rpx;
				height: 7rpx;
				background: #FFFAF5;
				border-radius: 4rpx;
				margin: 10rpx auto 0;

			}

		}

	}

	.scroll {
		height: calc(100vh - 266rpx);
	}

	.swiper {
		width: 702rpx;
		height: 330rpx;
		margin: 18rpx auto;
	}

	.swiper-item {
		width: 702rpx;
		height: 330rpx;
		
		border-radius: 36rpx;
		image{
			display: block;
			width: 702rpx;
			height: 330rpx;
			border-radius: 36rpx;
		}
	}

	.package {
		.price {
			width: 702rpx;
			height: 146rpx;
			background: linear-gradient(90deg, #FE9B23 0%, #FFC53D 100%);
			border-radius: 36rpx;
			margin: 0 auto;
			overflow: hidden;

			.amount {
				margin: 29rpx 0 0 45rpx;
				font-weight: bold;
				font-size: 38rpx;
				color: #FFFFFF;
				display: inline-block;
			}

			.amount-after {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				display: inline-block;
			}
		}

		.content {
			width: 702rpx;
			height: 183rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			margin: -53rpx auto 15rpx;
			overflow: hidden;

			.title {
				display: block;
				font-weight: 400;
				font-size: 30rpx;
				color: #16191B;
				margin: 36rpx 0 0 36rpx;
			}

			.tag {
				display: block;
				width: 372rpx;
				height: 45rpx;
				background: #FFEBD3;
				border-radius: 10rpx;
				margin: 16rpx 0 0 36rpx;
				font-size: 20rpx;
				color: #FE9B23;
				text-align: center;
				line-height: 45rpx;
			}

			.footer {
				margin: 29rpx 0 0 36rpx;
				display: flex;
				align-items: center;

				image {
					width: 21rpx;
					height: 23rpx;
					display: block;
					margin-right: 9rpx;
				}

				text {
					font-size: 20rpx;
					color: #8E8E8E;
				}
			}
		}
	}

	.service {
		width: 620rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 36rpx;
		padding: 0 41rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 110rpx;

			.label {
				font-size: 30rpx;
				color: #16191B;
			}

			.value {
				flex: 2;
				font-size: 26rpx;
				color: #A5A5A5;
				display: block;
				margin: 0 70rpx;
			}

			image {
				width: 38rpx;
				height: 38rpx;
				display: block;
			}
		}
	}

	.shop {
		width: 622rpx;
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin: 16rpx auto;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 30rpx;
				color: #16191B;
			}

			.tag {
				font-size: 26rpx;
				color: #FE9B23;
			}
		}

		.content {
			margin-top: 29rpx;
			display: flex;

			image {
				display: block;
				width: 134rpx;
				height: 134rpx;
				background: #FAFAFA;
				margin-right: 22rpx;
				flex-shrink: 0;
			}

			view {
				.shop-title {
					font-size: 30rpx;
					color: #16191B;
					flex: 2;
					margin-bottom: 56rpx;
				}

				view {
					display: flex;
					justify-content: space-between;
					flex: 2;

					text {
						font-size: 26rpx;
						color: #A5A5A5;

					}
				}
			}
		}

		.process {
			display: flex;
			align-items: center;
			margin-top: 22rpx;
			justify-content: space-between;

			view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					display: block;
					width: 69rpx;
					height: 69rpx;
					margin-bottom: 13rpx;
				}

				text {
					font-size: 22rpx;
					color: #A5A5A5;
				}
			}

			>image {
				display: block;
				width: 38rpx;
				height: 38rpx;

			}
		}
	}

	.commit {
		width: 622rpx;
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin: 16rpx auto;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 30rpx;
				color: #16191B;
			}

			view {
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #A5A5A5;
				}

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
				}
			}
		}

		.commit-list {
			margin-top: 30rpx;

			.commit-item {
				.user {
					display: flex;
					align-items: center;
					margin-bottom: 35rpx;

					image {
						display: block;
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						margin-right: 14rpx;
					}

					view {
						.nickName {
							font-size: 30rpx;
							color: #16191B;
							display: block;
							margin-top: 16rpx;
						}

						.time {
							font-size: 22rpx;
							color: #A5A5A5;
							display: block;
						}
					}
				}

				.content {
					image {
						width: 32rpx;
						height: 30rpx;
						display: block;
						margin-right: 10rpx;
						display: inline-block;
					}

					.shop-name {
						color: rgba(254, 156, 38, 1);

						font-size: 30rpx;
					}

					.commit-content {
						font-size: 30rpx;
						color: rgba(66, 68, 70, 1);

					}
				}

				.pics {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;
					margin-right: -20rpx;

					image {
						width: 202rpx;
						height: 202rpx;
						display: block;
						margin-right: 10rpx;
						background: pink;
					}
				}
			}
		}
	}

	.detail {

		.title {
			font-size: 30rpx;
			color: #16191B;
			display: block;
			text-align: center;
			margin-bottom: 30rpx;
			margin-top: 36rpx;
		}

		image {
			display: block;
			margin: 0 auto;
			
			
			width: 100%;
		}
	}

	.footer-fix {
		width: 748rpx;
		height: 166rpx;

		.content {
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			display: flex;
			justify-content: space-between;

			.price {
				margin-left: 30rpx;
				margin-top: 30rpx;

				.amount {
					color: #FE9C26;
					font-weight: bold;
					display: block;
					font-size: 34rpx;
				}

				.unamount {
					color: #A8A8A8;
					font-size: 28rpx;
					display: block;
					text-decoration: line-through;
				}
			}

			.btn {
				width: 210rpx;
				height: 70rpx;
				background: #FE9C26;
				border-radius: 35rpx;
				font-size: 28rpx;
				color: #FFFBF6;
				line-height: 70rpx;
				margin-top: 30rpx;
				margin-right: 30rpx;
			}
		}


	}

	.popup-content {
		background: #FFFFFF;
		border-radius: 36rpx 36rpx 0 0;
		padding: 54rpx 55rpx 107rpx;

		.title {
			font-size: 30rpx;
			color: #16191B;
			display: inline-block;
		}

		.liters-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.liters {

			// display: flex;   
			// align-items: flex-end;
			.unit {
				font-size: 26rpx;
				color: #A9A8A8;
				display: inline-block;
				margin-left: 10rpx;
			}

			.ts {
				display: block;
				font-size: 20rpx;
				color: #FE9B23;
				margin-top: 15rpx;
			}
		}

		.list {
			margin-top: 27rpx;
			margin-bottom: 35rpx;
			display: flex;
			flex-wrap: wrap;
			margin-right: -20rpx;

			text {
				font-size: 24rpx;
				color: #16191B;
				display: block;
				padding: 0 23rpx;
				height: 57rpx;
				border-radius: 28rpx;
				border: 1px solid #2C2C2C;
				margin-right: 14rpx;
				margin-bottom: 13rpx;
				line-height: 57rpx;
			}

			.active {
				border: 1px solid #FE9B23;
				color: #FE9B23;
			}
		}

		.btn {
			width: 640rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
			box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
			border-radius: 28rpx;
			line-height: 100rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-top: 129rpx;
		}

	}
	.popup-select{
		padding: 54rpx 55rpx 107rpx;
		background: #FFFFFF;
		border-radius: 36rpx 36rpx 0 0;
		.title{
			font-size: 30rpx;
			color: #16191B;
			display: inline-block;
		}
		.select-list{
			margin-top: 30rpx;
			max-height: 600rpx;
			overflow-y: scroll;
			.select-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 620rpx;
				height: 117rpx;
				background: #FAFAFA;
				margin-bottom: 18rpx;
				border-radius: 24rpx;
				.left{
					display: flex;
					align-items: center;
				}
				.icon{
					width: 48rpx;
					height: 48rpx;
					
					display: block;
					margin-left: 46rpx;
					margin-right: 17rpx;
				}
				text{
					font-weight: bold;
					font-size: 30rpx;
					color: #16191B;
				}
				.right{
					width: 36rpx;
					height: 36rpx;
					display: block;
					margin-right: 32rpx;
					display: none;
				}
			}
			.select-item-active{
				background: #FFF4E7;
				border: 1px solid #FE9B23;
				.left{
					text{
						color: #FE9B23;
					}
					image{
						
					}
				}
				.right{
					
					display: block;
				}
			}
		}
		.btn{
			width: 640rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
			box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
			border-radius: 28rpx;
			line-height: 100rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-top: 129rpx;
		}
	}



</style>